class Index {
    constructor() {
        this.$()
        // this.getData();
        this.carousel();
        // var res
        //    console.log(this.$('.spin'));
    }

    /*       轮播图      */
    carousel() {
        // 1 获取节点对象
        let ulLisObj = document.querySelectorAll('.uul li');
        let olLisObj = document.querySelectorAll('.ool li');
        let prev = document.querySelector('#goPrev');
        let next = document.querySelector('#goNext');

        // 要进去,隐藏的图片索引
        let lastIndex = 0;
        // 要显示,要出来的图片索引
        let index = 0;
        // 2 给ol 下所有li绑定点击事件
        olLisObj.forEach((li, key) => {
            // console.log(li);
            li.onclick = function () {
                // 2-1 设置要隐藏和显示的索引
                lastIndex = index;
                index = key;
                change();
            }
        });
        // 实现右边按钮
        next.onclick = function () {
            lastIndex = index;
            index++;
            // 判断索引是否超过最大值
            if (index > ulLisObj.length - 1) {
                index = 0;
            }
            change();
        }

        // 实现左边按钮,上一张
        prev.onclick = function () {
            lastIndex = index;
            index--;
            // 判断超过最小索引,则直接赋值最大索引
            if (index < 0) {
                index = ulLisObj.length - 1;
            }
            change();
        }
        // 自动播放的实现
        let times = '';
        function autoPlay() {
            times = setInterval(function () {
                // 直接就是下一张
                next.onclick();
            }, 10000)
        }
        autoPlay();

        // 鼠标移入则清除定时器
        next.parentNode.onmouseover = function () {
            clearInterval(times)
        }
        // 鼠标移入则继续开始
        next.parentNode.onmouseout = function () {
            autoPlay();
        }
        // 操作显示对应的图片和按钮
        function change() {
            // 设置上一张图片隐藏
            ulLisObj[lastIndex].className = '';
            olLisObj[lastIndex].className = '';

            // 设置当前操作的图片显示
            ulLisObj[index].className = 'ac';
            olLisObj[index].className = 'ac';
        }
    }


    /*获取页面元素*/
    $(ele) {
        let res = document.querySelectorAll(ele);
        // 如果获取到的是,当个节点集合,就返回单个节点,如果是多个节点集合,就返回整个集合.
        return res.length == 1 ? res[0] : res;
    }
}

new Index;

var asopp = [
    {
        "id": "001",
        "imgmin": [
            "../img/0102.jpg",
            "../img/0103.jpg",
            "../img/0104.jpg",
            "../img/0105.jpg",
            "../img/0106.jpg",
        ],
        "imgContent": "../img/0101.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "黛珂同原料制造商",
        "name": "玻尿酸高保湿面膜10片26ml",
        "judge": "20.7w+条评价",
        "Pro": "瑟尤丽恩小分子玻尿酸高保湿水润面膜",
        "Prod": "小分子玻尿酸技术，深层渗透肌肤，补水保湿，水润亮泽，平滑肌肤",
        "day": "7天"
    },
    {
        "id": "002",
        "imgmin": [
            "../img/0202.jpg",
            "../img/0203.jpg",
            "../img/0204.jpg",
            "../img/0205.jpg",
            "../img/0206.jpg",
        ],
        "imgContent": "../img/0201.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "SK2同原料制造商",
        "name": "[温和]米酵素洁面乳",
        "judge": "20.7w+条评价",
        "Pro": "氨基酸系洁面乳敏感肌肤孕妇可用",
        "Prod": "温和配方，彻底清洁毛孔，泡沫细腻，清爽水润不紧绷，无残留",
        "day": "3天"
    },
    {
        "id": "003",
        "imgmin": [
            "../img/0302.jpg",
            "../img/0303.jpg",
            "../img/0304.jpg",
            "../img/0305.jpg",
            "../img/0306.jpg",
        ],
        "imgContent": "../img/0301.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "DIOR同原料制造商",
        "name": "玻尿酸淡纹变色(润唇膏)",
        "judge": "18.1w+条评价",
        "Pro": "瑟尤丽恩玻尿酸淡纹变色唇膏",
        "Prod": "玻尿酸微球，肌肤紧致娇嫩性感、淡化皱纹，温感变色",
        "day": "3天"
    },
    {
        "id": "004",
        "imgmin": [
            "../img/0402.jpg",
            "../img/0403.jpg",
            "../img/0404.jpg",
            "../img/0405.jpg",
            "../img/0406.jpg",
        ],
        "imgContent": "../img/0401.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "希尔顿酒店床品制造商",
        "name": "S.S.铂金缎毛巾2条装",
        "judge": "20.7w+条评价",
        "Pro": "经典商务酒店铂金缎毛巾面巾",
        "Prod": "天然长绒棉织造 柔软吸水 缎档提花工艺 简洁大方",
        "day": "7天"
    },
    {
        "id": "005",
        "imgmin": [
            "../img/0502.jpg",
            "../img/0503.jpg",
            "../img/0504.jpg",
            "../img/0504.jpg",
            "../img/0506.jpg",
        ],
        "imgContent": "../img/0501.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "星巴克咖啡中国产地",
        "name": "手冲定制咖啡6杯9.9元/杯",
        "judge": "20.7w+条评价",
        "Pro": "手冲定制咖啡6杯 9.9元/杯",
        "Prod": "随时随地享受定制手冲咖啡（约9.9元/杯）",
        "day": "7天"
    },
    {
        "id": "006",
        "imgmin": [
            "../img/0602.jpg",
            "../img/0603.jpg",
            "../img/0604.jpg",
            "../img/0605.jpg",
            "../img/0606.jpg",
        ],
        "imgContent": "../img/0601.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "CHANEL同原料制造商",
        "name": "炫色魅力唇膏口红",
        "judge": "20.7w+条评价",
        "Pro": "瑟尤丽恩炫色魅力唇膏口红",
        "Prod": "意大利进口料体，鲜艳色泽，打造百变魅力美唇",
        "day": "7天"
    },
    {
        "id": "007",
        "imgmin": [
            "../img/0702.jpg",
            "../img/0703.jpg",
            "../img/0704.jpg",
            "../img/0705.jpg",
            "../img/0706.jpg",
        ],
        "imgContent": "../img/0701.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "黛珂同原料制造商",
        "name": "玻尿酸高保湿面膜10片26ml",
        "judge": "20.7w+条评价",
        "Pro": "瑟尤丽恩小分子玻尿酸高保湿水润面膜",
        "Prod": "小分子玻尿酸技术，深层渗透肌肤，补水保湿，水润亮泽，平滑肌肤",
        "day": "7天"
    },
    {
        "id": "008",
        "imgmin": [
            "../img/0802.jpg",
            "../img/0803.jpg",
            "../img/0804.jpg",
            "../img/0805.jpg",
            "../img/0806.jpg",
        ],
        "imgContent": "../img/0801.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "黛珂同原料制造商",
        "name": "玻尿酸高保湿面膜10片26ml",
        "judge": "20.7w+条评价",
        "Pro": "瑟尤丽恩小分子玻尿酸高保湿水润面膜",
        "Prod": "小分子玻尿酸技术，深层渗透肌肤，补水保湿，水润亮泽，平滑肌肤",
        "day": "7天"
    },
    {
        "id": "009",
        "imgmin": [
            "../img/0902.jpg",
            "../img/0903.jpg",
            "../img/0904.jpg",
            "../img/0905.jpg",
            "../img/0906.jpg",
        ],
        "imgContent": "../img/0901.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "黛珂同原料制造商",
        "name": "玻尿酸高保湿面膜10片26ml",
        "judge": "20.7w+条评价",
        "Pro": "瑟尤丽恩小分子玻尿酸高保湿水润面膜",
        "Prod": "小分子玻尿酸技术，深层渗透肌肤，补水保湿，水润亮泽，平滑肌肤",
        "day": "7天"
    },
    {
        "id": "010",
        "imgmin": [
            "../img/1002.jpg",
            "../img/1003.jpg",
            "../img/1004.jpg",
            "../img/1005.jpg",
            "../img/1006.jpg",
        ],
        "imgContent": "../img/1001.jpg",
        "price": "$79",
        "hot": "爆品",
        "with": "一起拼",
        "mer": "黛珂同原料制造商",
        "name": "玻尿酸高保湿面膜10片26ml",
        "judge": "20.7w+条评价",
        "Pro": "瑟尤丽恩小分子玻尿酸高保湿水润面膜",
        "Prod": "小分子玻尿酸技术，深层渗透肌肤，补水保湿，水润亮泽，平滑肌肤",
        "day": "7天"
    }

]
let shop = '';
asopp.forEach(function (item) {
            shop += `<div class="zuo">
            <img src="${item.imgContent}" alt="" class="images" id="${item.id}">
            <span class="price">${item.price}</span>
            <span class="hot">${item.hot}</span>
            <span class="with">${item.with}</span>
            <p class="mer">${item.mer}</p>
            <span class="name">${item.name}</span>
            <span class="judge">${item.judge}</span>
            </div>
            `
        })
        var sh = document.querySelector('.spin');
        sh.innerHTML = shop;

init();
function init(){
    let imag = document.querySelectorAll('.images')
    // console.log(imag);
    //遍历
    imag.forEach(function(item){
        item.addEventListener("click",divClickhandler);
    })
}

function divClickhandler(e){
    if(e.type==="click"){
        res = asopp.find(item => item.id === e.target.id);
        // console.log(res);
        sessionStorage.setItem("current", JSON.stringify(res));
        location.href=`shopping.html?${e.target.id}`;
    }else{
        return;
    };
}